<template>
    <basic-container :btnFlag=true>
        <div class="card-border">
            <card-header :header-data="headerData"></card-header>
            <div>
                <h4 style="margin-left: 10px;">基本信息：</h4>
                <el-row>
                    <el-col :span="21">
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary"
                                   size="mini"
                                   @click="consultList">查看会商</el-button>
                    </el-col>
                </el-row>
                <detail-form :data-list="dataList"></detail-form>
                <!--附件组件替换-->
                <div style="display: flex;margin-left: 72px;height: 55px;">
                    <div style="font-weight: 600;"><span>附件:</span></div>
                    <div style="position: relative;top: -20px; left: 20px;">
                        <preview :attachementId="fileIds" v-if="fileIds" ></preview>
                    </div>
                </div>

            </div>
            <el-tabs class="bs-tab"
                     v-model="activeName"
                     type="card">
                <el-tab-pane label="规划信息"
                             name="first">
                    <avue-crud :data="tableData"
                               :option="option"
                               :table-loading="tableLoading"
                               style="margin-top: -60px;">
                    </avue-crud>
                </el-tab-pane>
                <el-tab-pane label="办理情况"
                             name="second">
                    <process-handle-history :processId="processId" :business-key="listId" :process-key="processKey"></process-handle-history>
                </el-tab-pane>
            </el-tabs>
        </div>
    </basic-container>
</template>

<script>
    import mailTable from '@/components/mailTable/main';
    import { getbasisinfo } from "@/api/planning/detailList";
    import { PROJECT_DIC } from "@/const/dict";
    import detailForm from '@/components/bostech-detail/form';
    import { listProcessVariables } from "@/api/activiti/monitor";
    import processHandleHistory from "@/components/activiti/history/processHandleHistory";

    export default {
        components: {
            mailTable,
            detailForm,
            processHandleHistory
        },
        name: "listDetail",
        data () {
            return {
                fileIds:'',
                dataList: [],
                infoForm: {
                    title: '',
                    description: '',
                },
                headerData: {
                    title: '清单详情',
                },
                tableData: [],
                listId: null,
                processKey: 'planning-list',
                processId: null,
                activeName: 'first',
                tableLoading: false,
                option: {
                    page: true,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth:70,
                    cellBtn: false,
                    delBtn: false,
                    menu:false,
                    columnBtn: false,
                    refreshBtn: false,
                    filterBtn: false,
                    searchBtn: false,
                    menuWidth: 100,
                    keyId: "id",
                    column: [
                        {
                            label: "规划名称",
                            width: 440,
                            prop: "title",
                            cell: true,
                            formatter: function (row, value, label, column) {
                                return '<a style="cursor: pointer;" onclick="detailApplication(\'' + row.registerinfoId + '\')">' + value + '</a>';
                            }
                        },
                        {
                            label: "申报(牵头)单位",
                            prop: "orgName",
                            type: "select",
                            dicData: PROJECT_DIC.ORG_CODE,
                            cell: true
                        },
                        {
                            label: "规划类型",
                            prop: "category",
                            type: "select",
                            dicData: PROJECT_DIC.CATEGORY,
                            cell: true
                        }
                    ]
                },
            }
        },
        created () {
            this.init();
            window.detailApplication = this.detailApplication;
        },
        methods: {
            init () {
                this.listId = this.$route.params.id;
                this.processId = this.$route.query.processId;
                this.getList();
                this.getOfficeFileId();
            },
            getList () {
                getbasisinfo(this.listId).then(response => {
                    this.infoForm.title = response.data.data.title;
                    this.infoForm.description = response.data.data.description;
                    this.tableData = response.data.data.planningRegisterinfoList;

                    this.dataList.unshift({ label: '清单标题：', value: this.infoForm.title, span: 24 },
                        { label: '清单说明：', value: this.infoForm.description, span: 24 });
                })
            },
            getOfficeFileId () {
                let params = {
                    processKey: 'planning-list',
                    businessKey: this.listId
                };
                listProcessVariables(params).then((res) => {
                    let processVariables = res.data.data;
                    if (processVariables != null) {
                        let fileId = processVariables.pdfFileId ? processVariables.pdfFileId : processVariables.officeFileId;
                        this.fileIds =fileId
//            this.dataList.push({ label: '附件：', value: fileId, type: 'file', span: 24 })
                    }
                });
            },
            //规划详情跳转
//            detailApplication (row, index) {
//                let src = `/regDetail/detail/${row.registerinfoId}`;
//                this.$router.push({
//                    path: src
//                })
//            },
            detailApplication(registerinfoId) {
                let src = `/regDetail/detail/${registerinfoId}`;
                this.$router.push({
                    path: src
                })
            },
            // 查看会商跳转
            consultList () {
                var type = {
                    type: 'B'
                };
                let src = `/consultList/detail/${this.$route.params.id}`;
                this.$router.push({
                    path: src,
                    query: type
                });
            },
        },
    }
</script>

<style lang="scss" scoped>
    .discuss-btn {
    }
</style>
